<template>
    <div class="table-all">
        <!-- 搜索区 -->
        <div class="app-container search-box">
            <SearchForm
                    :form="searchData.form"
                    :options="searchData.options"
                    @searchUpdate="search"
                    @resetSearchData="resetSearchData"
            ></SearchForm>
        </div>
        <!-- 按钮区 -->
        <div class="app-container table-box">
            <div class="table-main">
                <!-- 表格 -->
                <v-table
                        title="预警结果数据"
                        v-if="tableMainHeight>0"
                        :table-columns="tableColumns"
                        :table-data="tableData"
                        :loading="loading"
                        :is-index="true"
                        ref="table"
                        :maxHeight="tableMainHeight">
                    <template #topButtonList>
                        <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
                    </template>
                  <template #checkType="scope">
                    {{getDictValue(scope.row.checkType, cityCheckTypeOptions)}}
                  </template>
                  <template #rules="scope">
                    {{ formatRules(scope.row)}}
                  </template>
                    <template #operation="scope">
                      <a class="table-btn-view table-operation"
                         @click="handleDetail(scope.row)">{{$t('table.view')}}</a>
                    </template>
                </v-table>
            </div>
            <div class="table-page">
                <!-- 页码 -->
                <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                            @pagination="search"/>
            </div>
        </div>
        <!-- 详情 -->
        <detailDialog :dialog-visible="detailDialogShow"
                    @success="editSuccess"
                    @close="editClose"
                    :openType="detailOpenType"
                    :id="detailId"
                    :showRule="true"
                    :title="detailTitle"
                    :cityCheckTypeOptions="cityCheckTypeOptions"
                    :cityCheckResultTypeOptions = "cityCheckResultTypeOptions"
                    :cityCheckResultDict = "cityCheckResultDict"
        ></detailDialog>
    </div>
</template>

<script>
    import { cityWaringResultPage,
            cityWaringResultExport,
           } from '@/api/risk/cityWaringResult'
    import { cityDiyResultPage, cityDiyResultExport } from '@/api/risk/cityDiyResult'
    import { getAreaList } from '@/api/system/area'
    import SearchForm from '@/components/searchForm/index'
    import ButtonForm from '@/components/ButtonForm/index'
    import VTable from '@/components/VTable/index'
    import Pagination from '@/components/Pagination/index'
    import detailDialog from './detail.vue'
    export default {
        components:{
            VTable,Pagination,detailDialog,SearchForm,ButtonForm
        },
        data(){
            return{
                tableColumns:[
                            {
                                prop: 'cityName',
                                label: '城市名称',
                                minWidth: '150',
                                slotname: 'cityName',
                                options: {}
                            },
                            {
                                prop: 'year',
                                label: '年份',
                                minWidth: '150',
                                slotname: 'year',
                                options: {}
                            },
                            {
                              prop: 'checkType',
                              label: '体检分类',
                              minWidth: '150',
                              slotname: 'checkType',
                              options: {}
                            },
                            {
                              prop: 'threeTargetName',
                              label: '体检指标名称',
                              minWidth: '150',
                              slotname: 'threeTargetName',
                              options: {}
                            },
                            {
                                prop: 'oneTargetName',
                                label: '指标大类',
                                minWidth: '150',
                                slotname: 'oneTargetName',
                                options: {}
                            },
                            {
                                prop: 'twoTargetName',
                                label: '指标细类',
                                minWidth: '150',
                                slotname: 'twoTargetName',
                                options: {}
                            },
                            {
                              prop: 'valueUnit',
                              label: '数值单位',
                              minWidth: '150',
                              slotname: 'valueUnit',
                              options: {}
                            },
                            {
                              prop: 'rules',
                              label: '预设数值',
                              minWidth: '150',
                              slotname: 'rules',
                              options: {}
                            },
                            {
                                prop: 'value',
                                label: '指标数值',
                                minWidth: '150',
                                slotname: 'value',
                                options: {}
                            },
                            {
                                prop: 'diyResult',
                                label: '指标结果',
                                minWidth: '150',
                                slotname: 'diyResult',
                                options: {}
                            },
                            {
                                prop: 'createTime',
                                label: '数据时间',
                                minWidth: '150',
                                slotname: 'createTime',
                                options: {}
                            },
                           {
                               prop: 'operation',
                               label: '操作',
                               width: '200',
                               align: 'center',
                               slotname: 'operation',
                               overflow: false,
                               fixed: 'right'
                           }
                ],
                tableData:[],
                selection: [],
                loading:false,
                total:1,
                pageNum:1,
                pageSize:10,
                detailOpenType:"add",
                detailDialogShow:false,
                detailId:"",
                detailTitle:"新增",
                dict:{},
                searchData:{
                  form:{
                        cityCode:'',
                        year:'',
                        threeTargetName:'',

                },
                   options:[
                            {
                              title:'体检指标名称',
                              key: "threeTargetName",
                              type: "text",
                            },
                            {
                              title:'年份',
                              key: "year",
                              type: "dateYear",
                            },
                           {
                             title:'城市',
                             key: "cityCode",
                             type: "select",
                             multiple:false,
                             option: {
                               data: this.cityList,
                               props: {
                                 key: "id", // 指定key对应data的字段
                                 label: "areaName", // 指定label对应data的字段
                                 value: "areaCode", // 指定value对应data的字段
                               },
                             },
                           }
                   ]
                },
                buttonList:[
                    {name:'导出数据',methods:'handleExport', type:'primary', hasPremission:["cityDiyResult:export"]}
                ],
                tableMainHeight: 0,
                // 字典
                cityCheckTypeOptions:[],
                cityCheckResultTypeOptions: [],
                cityCheckResultDict:{},
                cityList:[]
            }
        },
        watch: {
              'cityCheckResultTypeOptions':{
                handler(newVal, oldVal) {
                      if(newVal){
                        console.log("cityCheckResultTypeOptions",this.cityCheckResultTypeOptions)
                        this.cityCheckResultTypeOptions.forEach(t=>{
                            this.cityCheckResultDict[t.name] = []
                            this.$commonJs.filterDataDict(t.name, this.cityCheckResultDict[t.name])
                        })
                      }
                },
                deep: true,
                immediate: true
            },
          'cityList':{
               handler(newVal, oldVal){
                 if(newVal){
                   this.searchData.options.forEach(t=>{
                     if(t.key == 'cityCode'){
                       t.option.data = newVal
                     }
                   })
                 }
               }
          }
        },
        methods:{
          formatRules(row){
            let rules = JSON.parse(row.rules)
            let returnList = []
            rules.forEach(t=>{
                let item = []
              console.log("t=====>",t)
                if(t.low){
                   item.push(t.low)
                }
                if(t.top){
                  item.push(t.top)
                }
                returnList.push(item.join("-"))
            })
            return returnList.join(",")
          },
          getResultLabel(row){
              return this.getDictValue(row.result, this.cityCheckResultDict[row.resultType])
            },
            handleDetail(row){
              this.detailId = row.id
              this.detailOpenType = "detail"
              this.detailTitle="详情"
              this.detailDialogShow = true
            },
            getCheckBoxValue(value,option){
                if(!value){
                    return
                }
                let temp = []
                let data = value.split(",")
                data.forEach(t=>{
                    let item = option.find(x=> x.value == t)
                if(item != undefined){
                    temp.push(item.label)
                }
            })
                return temp.join(",")
            },
            getDictValue(value,option){
                let item = option.find(t=> t.value == value)
                if(item!=undefined){
                    return item.label
                }
                return value
            },
            editClose(){
                this.detailDialogShow = false
            },
            editSuccess(){
                this.search()
                this.detailDialogShow = false
            },
            search(){
                this.fetch({
                        ...this.searchData.form,
                })
            },
            fetch(params={}){
                params.pageSize = this.pageSize
                params.pageNum = this.pageNum
                if(params.threeTargetName!=null){
                  params.threeTargetName  = params.threeTargetName.replace(/\%/g,"%25");
                }
                this.loading = true
                cityDiyResultPage(params).then(res=>{
                    if(res.code==200){
                        this.total = res.data.total
                        this.tableData = res.data.rows
                    }else{
                    this.$message({
                        message: this.$t('tips.systemException'),
                        type: 'error'
                     })
                   }
                }).finally(final=>{
                    this.loading = false
               })
            },
            // 重置搜索条件
            resetSearchData(){
                this.searchData.form = {
                        cityName:'',
                        cityCode:'',
                        year:'',
                        batchNum:'',
                        areaCode:'',
                        areaName:'',
                        oneTargetName:'',
                        oneTargetNo:'',
                        twoTargetName:'',
                        twoTargetNo:'',
                        threeTargetName:'',
                        threeTargetNo:'',
                        value:'',
                        resultType:'',
                        result:'',
                        getTime:'',
                        source:'',
            }
            },
            // 触发按钮区域按钮方法
            clickButton(methods){
                this[methods]()
            },
            handleAdd(){
                this.detailOpenType = "add"
                this.detailTitle = "新增"
                this.detailDialogShow = true
            },
            handleEdit(row){
                this.detailId = row.id
                this.detailOpenType = "edit"
                this.detailTitle="编辑"
                this.detailDialogShow = true
            },
            handleExport(){
                let params = {
                        ...this.searchData.form
                }
               cityDiyResultExport(params,`城市预警结果信息_${new Date().getTime()}.xlsx`);
            },
            handleImport(){
                console.log("等待处理")
            },
            closeDialog(){
                this.detailDialogShow = false
            },
        },
        activated(){
            this.fetch()
        },
        created(){
            // 获取字典值
          this.cityCheckTypeOptions = []
          this.$commonJs.filterDataDict("cityCheckType",this.cityCheckTypeOptions)
          this.cityCheckResultTypeOptions = []
          this.$commonJs.filterDataDict("cityCheckResultType",this.cityCheckResultTypeOptions)
          getAreaList({parentCode:"440000000000"}).then(res=>{
              if(res.code==200){
                this.cityList = res.data
              }
          })
          this.$commonJs.setLeftMenuHidden(this)
        },
        mounted(){
            this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
        }
    }
</script>

<style lang="scss" scoped>
    .table-all {
        display: flex;
        flex-direction: column;
        height: 100%;

    .search-box {
        padding-bottom: 6px;
    }

    .table-box {
        padding-top: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

    .table-main {
        flex: 1;
        overflow: auto;
    }

    .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
    }

    ::v-deep .pagination-container {
        text-align: right;
    }

    }
    }
</style>
